/// <reference types="webpack-dev-server" resolution-mode="require" />
import path from "node:path";
import HtmlBundlerPlugin from "html-bundler-webpack-plugin";
// import HtmlWebpackPlugin from "html-webpack-plugin";
/**
 * @import * as webpack from 'webpack';
 */

const isDevelopment = process.env.NODE_ENV !== "production";

/**
 * @type {webpack.Configuration}
 */
export default {
  name: "webpack-htmx-app",
  mode: isDevelopment ? "development" : "production",
  context: import.meta.dirname,
  experiments: {
    topLevelAwait: true,
  },
  devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
  target: "web",
  // entry: "./main.mjs",
  output: {
    // path: path.resolve(import.meta.dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },
  module: {
    rules: [
      // {
      //   test: /\.html$/i,
      //   use: "html-loader",
      // },
      {
        test: /\.css$/i,
        use: ["css-loader"],
      },
      {
        test: /\.m?js$/,
        type: "javascript/auto",
      },
    ],
  },
  devServer: {
    hot: true,
    liveReload: false,
  },
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: "./index.html",
        contact: "./contact/@id.html",
      },
      js: {
        filename: "js/[name].[contenthash:8].js",
      },
      css: {
        filename: "css/[name].[contenthash:8].css",
      },
    }),
    // new HtmlWebpackPlugin({
    //   template: "./index.html",
    //   filename: "index.html",
    // }),
    // new HtmlWebpackPlugin({
    //   template: "./contact/@id.html",
    //   filename: "contact/@id.html",
    // }),
  ],
};
